<template>
  <page-frame>
    <div class="visterRegistration">
      <div class="toptitle">
        <div class="left">访客记录-访客登记</div>
        <div class="right">
          <div class="btns">
            <div v-if="!ways">
              <el-button @click="submitForm('ruleForm')" class="lightGreenBtn">保存</el-button>
              <el-button @click="back">返回</el-button>
            </div>
            <div v-if="ways">
              <el-button @click="back">返回</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <!--<div>{{$data.ruleForm}}</div>-->
      <div class="file-content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="访客姓名" prop="visitors">
                    <el-input v-model="ruleForm.visitors" :disabled="ways"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否预约" prop="appointed">
                  <el-radio-group v-model="ruleForm.appointed">
                    <el-radio :label='0' :disabled="ways">是</el-radio>
                    <el-radio :label='1' :disabled="ways">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="来访时间" prop="visitTime">
                  <el-date-picker
                    v-model="ruleForm.visitTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :disabled="ways"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="访问事由" prop="reason">
                  <el-select v-model="ruleForm.reason" :disabled="ways" placeholder="请选择访问事由">
                    <el-option
                      v-for="item in reasonOptions"
                      :label="item.label"
                      :value="item.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" v-if="ruleForm.reason=='亲友探望'">
                <el-form-item label="会员姓名" prop="memberId">
                  <el-autocomplete v-model="memberView.memberName" :disabled="ways" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="ruleForm.reason!='亲友探望'">
                <el-form-item label="会员姓名">
                  <el-autocomplete v-model="memberView.memberName" :disabled="ways" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="ruleForm.reason!='亲友探望'">
                <el-form-item label="与会员关系">
                  <el-select v-model="ruleForm.relation" :disabled="ways">
                    <el-option label="父母子女" :value="0"></el-option>
                    <el-option label="亲友" :value="1"></el-option>
                    <el-option label="夫妻" :value="2"></el-option>
                    <el-option label="其他" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="ruleForm.reason=='亲友探望'">
                <el-form-item label="与会员关系" prop="relation">
                  <el-select v-model="ruleForm.relation" :disabled="ways">
                    <el-option label="父母子女" :value="0"></el-option>
                    <el-option label="亲友" :value="1"></el-option>
                    <el-option label="夫妻" :value="2"></el-option>
                    <el-option label="其他" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="contact">
                  <el-input v-model="ruleForm.contact" :disabled="ways"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="来访人数" prop="visitorNum">
                  <el-input v-model="ruleForm.visitorNum" :disabled="ways"></el-input>人
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="预计离开时间">
                  <el-date-picker
                    v-model="ruleForm.eLeaveTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :disabled="ways"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="陪同人">
                  <el-input v-model="ruleForm.receiver" :disabled="ways"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  :autosize="{minRows:4,maxRows:4}"
                  placeholder="请输入备注信息"
                  v-model="ruleForm.remark"
                  :disabled="ways"
                >
                </el-input>
              </el-form-item>
            </el-row>
          </el-form>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import visitorRecordApi from '../../service/serCenter/visitorRecordApi';
  import commonApi from '../../service/member/commonApi';
  import commonJs from '../../config/common';
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  export default {
    methods: {
      init(){
        //判断 详情or新增
        if(this.$route.params.way==0){//详情
          this.ways = true;
          //获取详情
          this.getDetailInfo(this.$route.params.row.vlId);
        }else if(this.$route.params.way==1){//新增
          this.ways = false;
        }
        this.getAllMember();
      },
      /**
       * 返回
       */
      back(){
        this.$router.push({name:'visitorRecord'});
      },
      /**
       * 保存
       */
      submitForm(formName) {
        let self = this;
        self.queryData.visitors = self.ruleForm.visitors;
        self.queryData.appointed = self.ruleForm.appointed;
        self.queryData.visitTime = self.ruleForm.visitTime;
        self.queryData.reason = self.ruleForm.reason;
        self.queryData.memberId = self.ruleForm.memberId;
        self.queryData.relation = self.ruleForm.relation;
        self.queryData.contact = self.ruleForm.contact;
        self.queryData.visitorNum = self.ruleForm.visitorNum;
        self.queryData.eLeaveTime = self.ruleForm.eLeaveTime;
        self.queryData.receiver = self.ruleForm.receiver;
        self.queryData.remark = self.ruleForm.remark;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.queryData.visitTime=commonJs.formatDateTime(self.queryData.visitTime);
            self.queryData.eLeaveTime=commonJs.formatDateTime(self.queryData.eLeaveTime);
            visitorRecordApi.visitorLog(self.queryData).then(
              (response)=>{
                if(response.data.status==200){
                  self.$message({
                    message: '保存成功',
                    type: 'success'
                  });
                  self.$router.push({name:'visitorRecord'});
                }else{
                  self.$message({
                    message: '保存失败',
                    type: 'error'
                  });
                }
              },
            );
          } else {
            return false;
          }
        });
      },
      /**
       * 获取详情
       */
      getDetailInfo(vlId){
        visitorRecordApi.getDetailInfo(vlId).then(
          (response)=>{
            this.ruleForm = response.data.data;
            this.ruleForm.visitTime = new Date(response.data.data.visitTime);
            this.ruleForm.eLeaveTime = new Date(response.data.data.eLeaveTime);
            this.memberView.memberName = this.ruleForm.memberName;
          }
        );
      },
      /**
       * 筛选会员
       */
      querySearchAsync(queryString, cb) {
//        console.debug(cb);
        var members = this.members;
        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
//        console.debug(results);
      }, 1000);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
//        console.log(item);
        this.memberInfor = item;
        this.ruleForm.memberId = item.memberId;
      },
      /**
       * 获得所有会员
       */
      getAllMember(){
        let self = this;
        outRegistrationApi.getAllMemberInfor(self.memberView).then(function (response) {
          self.members = response.body.data;
          for(var i=0;i<self.members.length;i++){
            var  member = self.members[i];
            member.value = member.memberName;
          };
        })
      },
    },
    mounted: function () {
      this.init();
    },
    data () {
      return {
        ways:false,
        ruleForm: {
          visitors:'',
          appointed:null,
          visitTime:'',
          reason:'',
          memberId:null,
          relation:null,
          contact:'',
          visitorNum:null,
          eLeaveTime:'',
          receiver:'',
          remark:'',
        },
        queryData:{

        },
        rules: {
          visitors: [
            { required: true, message: '请输入访客姓名', trigger: 'blur' },
          ],
//          appointed: [
//            { type:'number', required: true, message: '请选择是否预约', trigger: 'change' },
//          ],
          visitTime: [
            { type: 'date', required: true, message: '请选择日期时间', trigger: 'change' }
          ],
          reason: [
            { required: true, message: '请选择访问事由', trigger: 'change' }
          ],
          memberId:[
            {type:'number', required: true, message: '请选择探访人姓名', trigger: 'change'}
          ],
          relation:[
            {type:'number', required: true, message: '请选择与会员关系', trigger: 'change'}
          ],
          contact:[
            {required: true, message: '请输入联系方式', trigger: 'blur'}
          ],
          visitorNum:[
            {required: true, message: '请输入来访人数', trigger: 'blur'}
          ],
        },
        reasonOptions:[{
          value: 7,
          label: '初次来访'
        },{
          value: 0,
          label: '亲友探望'
        },{
          value: 1,
          label: '媒体采访'
        },{
          value: 2,
          label: '义工等团体'
        },{
          value: 3,
          label: '参观学习'
        },{
          value: 4,
          label: '上级视察'
        },{
          value: 5,
          label: '学生实践'
        },{
          value: 6,
          label: '其他'
        }],
        memberInfor:{},
        members:[{
          memberId:1,
          memberName: "张小建",
          value: "张小建",
        }],
        memberView:{
          "memberName": ""
        },
      }
    },
  }
</script>
<style>

     .visterRegistration .file-content{
       width:80%;
       margin:50px auto;
     }

     .visterRegistration .el-textarea{
       width:91%!important;
     }

     .visterRegistration .el-autocomplete{
       width:100%;
     }
</style>
